@extends('frontend.layouts.master')
@section('head')
    <title>Contact Us | Murex Capital</title>
    @parent
@stop

@section('content')
        <!-- CONTACT -->
        <section role="contentinfo" class="contact-us main-section">
            <div class="row">
                <div class="large-10 large-centered columns">
                    <h2>Contact Us</h2>
                </div>
            </div>
            <div class="row">
                <div class="large-6 columns">
                    <div id="map-miami" style="width: 100%;height: 300px;"></div>
                    <p class="location">Miami</p>
                    <p class="location-details">
                        2600 S Douglas Road Suite 1010B <br />
                        Coral Gables, Fl 33134<br />
                        <a href="tel://3055294700"></a>Phone: 305-529-4700<br />
                    </p>
                </div>
                <div class="large-6 columns">
                    <div id="map-ny" style="width: 100%;height: 300px;"></div>
                    <p class="location">New York</p>
                    <p class="location-details">
                        747 Third Avenue Suite #19-C <br />
                        New York, NY 10017<br />
                        Phone: <a href="tel://2129941850"></a>212-994-1850<br />
                    </p>
                </div>
            </div>

            <div class="row"><div class="large-12 columns"><hr /></div></div>

            <!-- CONTACT FORM -->
            <div class="row">
                <div class="large-8 large-centered columns">
                    <a class="mail" href="mailTo:info@murexcap.com">info@murexcap.com</a>
                    <h4>Send us your message</h4>
                    <form id="contact-message" class="contact-form" action="#" data-abide="ajax" method="post">
                        <div class="row">
                            <div class="large-12 columns">
                                <label for="name">Name</label>
                                <input name="name" type="text" placeholder="" required />
                                <small class="error">This fields is required.</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-12 columns">
                                <label for="emal">Email</label>
                                <input name="email" type="email" placeholder="" required />
                                <small class="error">A valid email address is required.</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-12 columns">
                                <label for="phone">Phone</label>
                                <input name="phone" type="text" placeholder="" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-12 columns">
                                <label for="message">Message</label>
                                <textarea name="message" placeholder="" required></textarea>
                                <small class="error">This fields is required.</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-12 columns">
                                <button type="submit" class="blue-button">Send</button>
                            </div>
                        </div>
                    </form>
                    <div class="done">
                        <img src="img/check.png" alt="Message sent" />
                        <p>Thank you for contacting us!<br />
                            We’ll be in touch shortly.</p>
                    </div>
                </div>
            </div>
            <!-- END CONTACT FORM -->
        </section>
        <!-- END CONTACT -->
@stop

@section('script')
    @parent
    <script src="js/fe/foundation/foundation.abide.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
        function initializeMiami() {
            var mapOptions = {
                zoom: 16,
                center: new google.maps.LatLng(25.747894, -80.25467300000003),
                panControl: false,
                zoomControl: false,
                maptypecontrol: false,
                streetViewControl: false,
                overviewMapControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById('map-miami'),
                    mapOptions);

            var myLatLng = new google.maps.LatLng(25.747894, -80.25467300000003);
            var beachMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
            });
            google.maps.event.addDomListener(window, 'resize', function() {
                map.setCenter(myLatLng);
            });
        }
        function initializeNy() {
            var mapOptions = {
                zoom: 16,
                center: new google.maps.LatLng(40.753474, -73.972058),
                panControl: false,
                zoomControl: false,
                maptypecontrol: false,
                streetViewControl: false,
                overviewMapControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById('map-ny'),
                    mapOptions);

            var myLatLng = new google.maps.LatLng(40.753474, -73.972058);
            var beachMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
            });
            google.maps.event.addDomListener(window, 'resize', function() {
                map.setCenter(myLatLng);
            });
        }
        google.maps.event.addDomListener(window, 'load', initializeMiami);
        google.maps.event.addDomListener(window, 'load', initializeNy);

        // SEND CONTACT MESSAGE AND DONE
        $('#contact-message').on('valid', function () {
            $('#contact-message').fadeOut();
            var data = $( this ).serializeArray();
            $.ajax({
                type: "POST",
                url: 'php/contact-mail.php',
                data: data,
            }).done(function(){
                $('.done').fadeIn(800);
            }).fail(function(){
                $('#contact-message').fadeIn();
            });
        });
    </script>
@stop